<template>
	<view>
	<view style="margin-bottom: 12px;" v-for="(i,n) in Datalist">
		<view class="day_box">
			<view>{{i.shop_name}}</view>
			<view class="right_tie">
			数据更新于{{i.date_text}}
			</view>
		</view>
		<view class="qian_toe">
			<view>
				<span class="xiao">顾客总数</span>
				<span class="roday">(今日)</span>
			</view>
			<view ><span class="qain">{{i.today_amount}}</span>人</view>
		</view>
		<view style="display: flex; width: 100%; justify-content: space-between;">
			<view class="xiaoe">
				<view>
					<span class="xiao">顾客总数</span>
					<span class="roday">(近7日)</span>
				</view>
				<view ><span class="qain">{{i.user_amount7}}</span>人</view>
			</view>
			<view class="xiaoe">
				<view>
					<span class="xiao">顾客总数</span>
					<span class="roday">(近30天)</span>
				</view>
				<view ><span class="qain">{{i.amount}}</span>人</view>
			</view>
		</view>
	</view>
		<view class="noMore">{{statusText}}</view>
	</view>
</template>

<script>
	import {amountIncome} from '@/api/merchat.js'
	export default {
		data() {
			return {
				page:1,
				lastPage:0,
				Datalist:[],
				statusText:"",
			};
		},
		onLoad() {
				this.getData()
		},
		onReachBottom:function(){
				this.page++
				if(this.page>this.lastPage){
					return
				}
				this.getData()
		},
		methods:{
			getData(){
				uni.showLoading({
					title:'加载中',
				})
				amountIncome({page:this.page}).then(res=>{
					uni.hideLoading()
					this.lastPage = res.data.last_page
					this.statusText = res.data.last_page==this.page?"暂无更多数据":"上拉加载"
					this.Datalist =[...this.Datalist,...res.data.data] 
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.day_box{
	margin-top: 22rpx;
	width: 750rpx;
	height: 96rpx;
	background: #13114c;
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom:1px solid #E7E7E7;
	color: #ffffff;
}
.right_tie{
	font-size: 14px;
	font-family: PingFangSC-Light, PingFang SC;
	font-weight: 300;
	color: #CFCFCF;
	
}
.qian_toe{
	width: 100%;
	height: 162rpx;
	background: #13114c;
	text-align: center;
	padding: 32rpx 0;
	border-bottom:1px solid #E7E7E7;;
}
.xiao{
	font-size: 14px;
	font-family: PingFangSC-Light, PingFang SC;
	font-weight: 300;
	color: #ffffff;
	margin-bottom: 8px;
}
.roday{
	font-size: 12px;
	font-family: PingFangSC-Light, PingFang SC;
	font-weight: 300;
	color: #e9c83ce8;
}
.qain{
	font-size: 24px;
	font-family: DINAlternate-Bold, DINAlternate;
	// font-weight: bold;
	color: #999999;
	margin-bottom: 8px;
	
	
}


.shu{
	font-size: 14px;
	font-family: PingFangSC-Light, PingFang SC;
	font-weight: 300;
	color: #999999;
}
.xiaoe{
	width: 376rpx;
	height: 180rpx;
	background: #13114c;
	text-align: center;
	padding: 17px;
}
.noMore{
	text-align: center;
	padding-bottom: 10rpx;
	color: #909399;
}
</style>
